<template>
	<div class="custom-form">
		<h1>你的定制需求？</h1>
		<div class="one-line">
			<span>联系人</span>
			<div class="name-box">
				<input type="text" name="" id="" value="" placeholder="留下您的大名，怎么称呼"/>
			</div>
		</div>
		<div class="one-line">
			<span>联系方式</span>
			<div class="qq-box">
				<input type="text" name="" id="" value="" placeholder="手机号/QQ/微信，如何联系你"/>
			</div>
		</div >
		<div class="one-line">
			<span>是否需要设计服务</span>
			<div class="">
				<input type="radio" name="service" id="" value="" />是&nbsp;&nbsp;
				<input type="radio" name="service" id="" value="" />否
			</div>
		</div>
		<div class="one-line">
			<span>定制品类</span>
			<div class="class-select">
				<select name="">
					<option value="">食品</option>
					<option value="">杯具</option>
					<option value="">图书</option>
					<option value="">家居</option>
				</select>
			</div>
		</div>
		<div class="one-line">
			<span>是否需要设计服务</span>
			<div class="">
				<input type="radio" name="time" id="" value="" />&lt;1个月&nbsp;&nbsp;
				<input type="radio" name="time" id="" value="" />1-2月&nbsp;&nbsp;
				<input type="radio" name="time" id="" value="" />&gt;2个月
			</div>
		</div>
		<div class="one-line">
			<span>备注</span>
			<div class="mark-box">
				<textarea name="" rows="" cols="" placeholder="描述您的团体定制需求"></textarea>
			</div>
		</div>
		<div class="one-line ">
			<div class="up-file">
				<span>上传附件</span><span class="file-desc">支持png、eps、ai、psd</span>
			</div>
		</div>
		<div class="one-line">
			<div class="submit-btn">
				提交
			</div>
		</div>
		<div class="one-line">
			<div class="tips">
				我们会在一个工作日内联系您，或<h6><a href="">轻戳客服</a></h6>
			</div>
		</div>
	</div>
</template>

<script>
</script>

<style lang="less" stylesheet="less">
	.custom-form{
		font-family: "微软雅黑";
		width: 1200px;
		margin: 0 auto;
		margin-top: 30px;
		overflow: hidden;
		h1{
			text-align: center;
		}
		.one-line{
			/*overflow: hidden;*/
			width: 500px;
			height: 36px;
			line-height: 36px;
			margin: 0 auto;
			margin-bottom: 10px;
			span{
				float: left;
				font-size: 1rem;
				display: inline-block;	
				width: 140px;
				text-align: right;
				margin-right: 10px;
			}
			div{
				float: left;
				display: inline-block;
				width: 350px;
			}
			.qq-box,.name-box{
				input{
					box-sizing: border-box;
					display: inline-block;
					width: 100%;
					height: 36px;
					border: none;
					border: 1px solid #eaeaea;
					
					/*height: 100%;*/
				}
			}
			.class-select{
				select{
					box-sizing: border-box;
					display: inline-block;
					width: 140px;
					height: 36px;
					border: 1px solid #eaeaea;
				}
			}
			.mark-box{
				textarea{
					box-sizing: border-box;
					display: inline-block;
					width: 100%;
					height: 120px;
					line-height: 36px;
					border: 1px solid #eaeaea;
					/*padding-top: 10px;*/
				}
			}
			.up-file{
				float: right;
				span{
					&:first-child{
						width: 120px;
						height: 30px;
						line-height: 30px;
						text-align: center;
						border: 1px solid black;
					}
					&:last-child{
						width: 180px;
						height: 30px;
						line-height: 30px;
						color: #a9a9a9;
					}
				}
			}
			.submit-btn{
				margin-top: 50px;
				float: right;
				text-align: center;
				font-size: 1.1rem;
				color: white;
				background-color: #4a4a4a;
				border-radius: 5px;
			}
			.tips{
				/*margin-top: 50px;*/
				float: right;
				text-align: center;
				font-size: 1.1rem;
				h6{
					display: inline-block;
					font-weight: normal;
					font-size: 1.1rem;
					/*color: red;*/
					a{
						color: red;
					}
				}
				/*span*/
				/*color: white;*/
				/*background-color: #4a4a4a;*/
				/*border-radius: 5px;*/
			}
		}
	}
</style>